<template>
    <div class="news-page">
        <div class="h-116px w-full bg-[#fff] flex items-center justify-between fixed top-0 px-91px">
            <img class="h-47px w-333px" src="/logo-h.png" />
            <div>
                <span class="text-sm text-[#000]">{{ getDateAndWeek }}</span>
            </div>
        </div>
        <div class="news-info">
            <div class="flex-center flex-col">
                <p class="text-[#333] text-40px font-600 mb-4">{{ newsInfo?.title }}</p>
                <n-flex>
                    <span class="text-[#666] text-sm">发布时间：</span>
                    <span class="text-[#666] text-sm">{{ newsInfo?.add_datetime }}</span>
                </n-flex>
            </div>
            <div class="news-info-card" v-html="newsInfo?.detail">

            </div>
        </div>
        <div class="footer-card flex-center flex-col">
            <p class="text-sm text-[#A1A1A1]">Copyright © www.zhongkekuncheng.com, All Rights Reserved.</p>
            <p class="text-sm text-[#A1A1A1]">武汉中科坤程信息产业有限公司</p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getNewsShowApi, type NewsShowInfoRes } from "@/api/home"
import { formateDate } from "@/utils"
const newsInfo = ref<NewsShowInfoRes | null>()

const route = useRoute()
onMounted(() => {
    renderNewsInfo()
})

async function renderNewsInfo() {
    const res = await getNewsShowApi({uuid: route.query.uuid as string})
    console.log(res);
    newsInfo.value = res
}
const getDateAndWeek = computed(() => {
    const { year, month, day, week } = formateDate(new Date())
    return `${year}${month}月${day}日 星期${week}`
})
</script>

<style lang="scss" scoped>
    .news-page {
        height: 100vh;
        background: #f2f7fa;
        overflow: hidden;
        overflow-y: auto;
        padding-bottom: 94px;

        .news-info {
            margin-top: 169px;
            padding: 0 120px;

            .news-info-card {
                background: #fff;
                border-radius: 8px;
                padding: 30px;
                margin-top: 21px;
            }
        }
        .footer-card {
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            height: 70px;
            background: url("@/assets/image/footer.png") no-repeat;
            background-size: 100% 100%;
        }
    }
</style>